<template>
  <div class="club-list-container">
    <!-- 搜索筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="俱乐部名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入俱乐部名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="运动类型">
          <el-select
            v-model="searchForm.sportType"
            placeholder="选择运动类型"
            clearable
            style="width: 150px"
          >
            <el-option label="全部" value="" />
            <el-option label="足球" value="football" />
            <el-option label="篮球" value="basketball" />
            <el-option label="羽毛球" value="badminton" />
            <el-option label="乒乓球" value="table_tennis" />
            <el-option label="网球" value="tennis" />
            <el-option label="游泳" value="swimming" />
            <el-option label="跑步" value="running" />
          </el-select>
        </el-form-item>

        <el-form-item label="认证状态">
          <el-select
            v-model="searchForm.verifyStatus"
            placeholder="选择认证状态"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="已认证" value="verified" />
            <el-option label="待认证" value="pending" />
            <el-option label="未认证" value="unverified" />
            <el-option label="认证失败" value="failed" />
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="正常" value="active" />
            <el-option label="禁用" value="disabled" />
            <el-option label="解散" value="dissolved" />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <IconifyIconOffline icon="ep:search" class="mr-1" />
            搜索
          </el-button>
          <el-button @click="handleReset">
            <IconifyIconOffline icon="ep:refresh" class="mr-1" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-bar">
        <div class="action-left">
          <el-button type="primary" @click="handleCreate">
            <IconifyIconOffline icon="ep:plus" class="mr-1" />
            新增俱乐部
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedClubs.length === 0"
            @click="handleBatchDelete"
          >
            <IconifyIconOffline icon="ep:delete" class="mr-1" />
            批量删除
          </el-button>
          <el-button type="success" @click="handleExport">
            <IconifyIconOffline icon="ep:download" class="mr-1" />
            导出数据
          </el-button>
          <el-button
            type="warning"
            :disabled="selectedClubs.length === 0"
            @click="handleBatchVerify"
          >
            <IconifyIconOffline icon="ep:check" class="mr-1" />
            批量认证
          </el-button>
        </div>

        <div class="action-right">
          <el-button circle @click="handleRefresh">
            <IconifyIconOffline icon="ep:refresh" />
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 俱乐部列表 -->
    <el-card class="table-card" shadow="never">
      <el-table
        v-loading="loading"
        :data="clubList"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="ID" width="80" />

        <el-table-column prop="logo" label="LOGO" width="80">
          <template #default="{ row }">
            <el-avatar :size="50" :src="row.logo" shape="square">
              <IconifyIconOffline icon="ep:picture" />
            </el-avatar>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="俱乐部名称" min-width="150">
          <template #default="{ row }">
            <div class="club-name">
              <span class="name">{{ row.name }}</span>
              <el-tag
                v-if="row.verifyStatus === 'verified'"
                type="success"
                size="small"
                class="verify-tag"
              >
                <IconifyIconOffline icon="ep:check" class="mr-1" />
                已认证
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="shortName" label="简称" width="100" />

        <el-table-column prop="sportType" label="运动类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getSportTypeColor(row.sportType)" size="small">
              {{ getSportTypeName(row.sportType) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="memberCount"
          label="成员数量"
          width="100"
          align="center"
        >
          <template #default="{ row }">
            <el-link type="primary" @click="viewMembers(row)">
              {{ row.memberCount }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column prop="level" label="等级" width="100">
          <template #default="{ row }">
            <el-rate
              v-model="row.level"
              disabled
              show-score
              text-color="#ff9900"
            />
          </template>
        </el-table-column>

        <el-table-column prop="verifyStatus" label="认证状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getVerifyStatusColor(row.verifyStatus)" size="small">
              {{ getVerifyStatusText(row.verifyStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-value="active"
              inactive-value="disabled"
              :disabled="row.status === 'dissolved'"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>

        <el-table-column prop="founder" label="创建者" width="120" />

        <el-table-column prop="createTime" label="创建时间" width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleView(row)"
            >
              查看
            </el-button>
            <el-button
              type="primary"
              link
              size="small"
              @click="handleEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              type="warning"
              link
              size="small"
              @click="handleMembers(row)"
            >
              成员
            </el-button>
            <el-dropdown @command="command => handleMoreAction(command, row)">
              <el-button type="primary" link size="small">
                更多
                <IconifyIconOffline icon="ep:arrow-down" class="ml-1" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-if="row.verifyStatus === 'pending'"
                    command="verify"
                  >
                    <IconifyIconOffline icon="ep:check" class="mr-1" />
                    认证审核
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.status !== 'dissolved'"
                    command="dissolve"
                  >
                    <IconifyIconOffline icon="ep:warning" class="mr-1" />
                    解散俱乐部
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <IconifyIconOffline icon="ep:delete" class="mr-1" />
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 俱乐部详情弹窗 -->
    <el-dialog v-model="detailVisible" title="俱乐部详情" width="800px">
      <div v-if="currentClub" class="club-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="俱乐部ID">{{
            currentClub.id
          }}</el-descriptions-item>
          <el-descriptions-item label="俱乐部名称">{{
            currentClub.name
          }}</el-descriptions-item>
          <el-descriptions-item label="简称">{{
            currentClub.shortName
          }}</el-descriptions-item>
          <el-descriptions-item label="运动类型">
            <el-tag
              :type="getSportTypeColor(currentClub.sportType)"
              size="small"
            >
              {{ getSportTypeName(currentClub.sportType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="成员数量">{{
            currentClub.memberCount
          }}</el-descriptions-item>
          <el-descriptions-item label="等级">
            <el-rate
              v-model="currentClub.level"
              disabled
              show-score
              text-color="#ff9900"
            />
          </el-descriptions-item>
          <el-descriptions-item label="认证状态">
            <el-tag
              :type="getVerifyStatusColor(currentClub.verifyStatus)"
              size="small"
            >
              {{ getVerifyStatusText(currentClub.verifyStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag
              :type="currentClub.status === 'active' ? 'success' : 'danger'"
            >
              {{ getStatusText(currentClub.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系人">{{
            currentClub.contactName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            currentClub.contactPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="地址" :span="2">{{
            currentClub.address
          }}</el-descriptions-item>
          <el-descriptions-item label="俱乐部介绍" :span="2">
            {{ currentClub.description || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="创建者">{{
            currentClub.founder
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            formatDateTime(currentClub.createTime)
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 成员管理弹窗 -->
    <el-dialog v-model="membersVisible" title="成员管理" width="1000px">
      <div v-if="currentClub" class="members-management">
        <div class="members-header">
          <span>{{ currentClub.name }} - 成员列表</span>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="handleAddMember">
              <IconifyIconOffline icon="ep:plus" class="mr-1" />
              添加成员
            </el-button>
            <el-button
              type="warning"
              size="small"
              :disabled="selectedMembers.length === 0"
              @click="handleBatchRemove"
            >
              <IconifyIconOffline icon="ep:remove" class="mr-1" />
              批量移除
            </el-button>
          </div>
        </div>

        <el-table
          :data="memberList"
          stripe
          @selection-change="handleMemberSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="avatar" label="头像" width="80">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatar">
                <IconifyIconOffline icon="ep:user" />
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="realName" label="真实姓名" width="120" />
          <el-table-column prop="role" label="角色" width="100">
            <template #default="{ row }">
              <el-tag :type="getMemberRoleColor(row.role)" size="small">
                {{ getMemberRoleText(row.role) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="joinTime" label="加入时间" width="160">
            <template #default="{ row }">
              {{ formatDateTime(row.joinTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag
                :type="row.status === 'active' ? 'success' : 'danger'"
                size="small"
              >
                {{ row.status === "active" ? "正常" : "禁用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button
                v-if="row.role !== 'founder'"
                type="warning"
                link
                size="small"
                @click="handleChangeRole(row)"
              >
                变更角色
              </el-button>
              <el-button
                v-if="row.role !== 'founder'"
                type="danger"
                link
                size="small"
                @click="handleRemoveMember(row)"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 认证审核弹窗 -->
    <el-dialog v-model="verifyVisible" title="认证审核" width="600px">
      <div v-if="currentClub" class="verify-form">
        <el-form :model="verifyForm" label-width="100px">
          <el-form-item label="俱乐部名称">
            <el-input v-model="currentClub.name" disabled />
          </el-form-item>

          <el-form-item label="审核结果">
            <el-radio-group v-model="verifyForm.result">
              <el-radio value="pass">通过</el-radio>
              <el-radio value="reject">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="审核意见">
            <el-input
              v-model="verifyForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入审核意见"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="verifyVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitVerify"
          >提交审核</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { IconifyIconOffline } from "@/components/ReIcon";
import dayjs from "dayjs";

const router = useRouter();

// 搜索表单
const searchForm = reactive({
  name: "",
  sportType: "",
  verifyStatus: "",
  status: "",
  dateRange: []
});

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
});

// 状态
const loading = ref(false);
const selectedClubs = ref([]);
const selectedMembers = ref([]);
const detailVisible = ref(false);
const membersVisible = ref(false);
const verifyVisible = ref(false);
const currentClub = ref(null);

// 认证表单
const verifyForm = reactive({
  result: "pass",
  remark: ""
});

// 俱乐部列表数据
const clubList = ref([
  {
    id: 1,
    name: "星火足球俱乐部",
    shortName: "星火FC",
    logo: "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=football%20club%20logo%20design%20with%20star%20and%20fire%20elements&image_size=square",
    sportType: "football",
    memberCount: 25,
    level: 4,
    verifyStatus: "verified",
    status: "active",
    contactName: "张教练",
    contactPhone: "13800138001",
    address: "北京市朝阳区体育场路123号",
    description: "专业足球俱乐部，致力于青少年足球培训",
    founder: "张三",
    createTime: "2023-01-15 10:00:00"
  },
  {
    id: 2,
    name: "飞鹰篮球俱乐部",
    shortName: "飞鹰",
    logo: "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=basketball%20club%20logo%20with%20eagle%20design&image_size=square",
    sportType: "basketball",
    memberCount: 18,
    level: 3,
    verifyStatus: "pending",
    status: "active",
    contactName: "李教练",
    contactPhone: "13800138002",
    address: "上海市浦东新区篮球馆456号",
    description: "业余篮球爱好者聚集地",
    founder: "李四",
    createTime: "2023-02-20 14:30:00"
  },
  {
    id: 3,
    name: "羽翼羽毛球俱乐部",
    shortName: "羽翼",
    logo: "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=badminton%20club%20logo%20with%20wing%20design&image_size=square",
    sportType: "badminton",
    memberCount: 32,
    level: 5,
    verifyStatus: "verified",
    status: "active",
    contactName: "王教练",
    contactPhone: "13800138003",
    address: "广州市天河区羽毛球馆789号",
    description: "高水平羽毛球俱乐部，多次获得市级比赛冠军",
    founder: "王五",
    createTime: "2023-03-10 09:15:00"
  },
  {
    id: 4,
    name: "乒乓精英俱乐部",
    shortName: "乒乓精英",
    logo: "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=table%20tennis%20club%20logo%20elite%20design&image_size=square",
    sportType: "table_tennis",
    memberCount: 15,
    level: 2,
    verifyStatus: "failed",
    status: "disabled",
    contactName: "赵教练",
    contactPhone: "13800138004",
    address: "深圳市南山区乒乓球馆101号",
    description: "乒乓球技术交流俱乐部",
    founder: "赵六",
    createTime: "2023-04-05 16:45:00"
  }
]);

// 成员列表数据
const memberList = ref([
  {
    id: 1,
    username: "zhangsan",
    realName: "张三",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=male%20athlete%20portrait&image_size=square",
    role: "founder",
    joinTime: "2023-01-15 10:00:00",
    status: "active"
  },
  {
    id: 2,
    username: "lisi",
    realName: "李四",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=female%20athlete%20portrait&image_size=square",
    role: "admin",
    joinTime: "2023-01-20 14:30:00",
    status: "active"
  },
  {
    id: 3,
    username: "wangwu",
    realName: "王五",
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=young%20athlete%20portrait&image_size=square",
    role: "member",
    joinTime: "2023-02-01 09:15:00",
    status: "active"
  }
]);

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm");
};

// 获取运动类型名称
const getSportTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    football: "足球",
    basketball: "篮球",
    badminton: "羽毛球",
    table_tennis: "乒乓球",
    tennis: "网球",
    swimming: "游泳",
    running: "跑步"
  };
  return typeMap[type] || type;
};

// 获取运动类型颜色
const getSportTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    football: "success",
    basketball: "warning",
    badminton: "info",
    table_tennis: "danger",
    tennis: "primary",
    swimming: "success",
    running: "warning"
  };
  return colorMap[type] || "info";
};

// 获取认证状态文本
const getVerifyStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    verified: "已认证",
    pending: "待认证",
    unverified: "未认证",
    failed: "认证失败"
  };
  return statusMap[status] || status;
};

// 获取认证状态颜色
const getVerifyStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    verified: "success",
    pending: "warning",
    unverified: "info",
    failed: "danger"
  };
  return colorMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    active: "正常",
    disabled: "禁用",
    dissolved: "已解散"
  };
  return statusMap[status] || status;
};

// 获取成员角色文本
const getMemberRoleText = (role: string) => {
  const roleMap: Record<string, string> = {
    founder: "创建者",
    admin: "管理员",
    member: "普通成员"
  };
  return roleMap[role] || role;
};

// 获取成员角色颜色
const getMemberRoleColor = (role: string) => {
  const colorMap: Record<string, string> = {
    founder: "danger",
    admin: "warning",
    member: "info"
  };
  return colorMap[role] || "info";
};

// 搜索
const handleSearch = () => {
  pagination.page = 1;
  loadClubList();
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    name: "",
    sportType: "",
    verifyStatus: "",
    status: "",
    dateRange: []
  });
  handleSearch();
};

// 新增俱乐部
const handleCreate = () => {
  router.push("/club/create");
};

// 批量删除
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedClubs.value.length} 个俱乐部吗？`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    ElMessage.success("删除成功");
    selectedClubs.value = [];
    loadClubList();
  } catch {
    // 用户取消
  }
};

// 导出数据
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 批量认证
const handleBatchVerify = () => {
  ElMessage.info("批量认证功能开发中");
};

// 刷新
const handleRefresh = () => {
  loadClubList();
};

// 选择变化
const handleSelectionChange = (selection: any[]) => {
  selectedClubs.value = selection;
};

// 成员选择变化
const handleMemberSelectionChange = (selection: any[]) => {
  selectedMembers.value = selection;
};

// 状态变更
const handleStatusChange = async (club: any) => {
  const actionText = club.status === "active" ? "启用" : "禁用";

  try {
    ElMessage.success(`${actionText}成功`);
  } catch (error) {
    // 恢复原状态
    club.status = club.status === "active" ? "disabled" : "active";
    ElMessage.error(`${actionText}失败`);
  }
};

// 查看俱乐部
const handleView = (club: any) => {
  currentClub.value = club;
  detailVisible.value = true;
};

// 编辑俱乐部
const handleEdit = (club: any) => {
  router.push(`/club/edit/${club.id}`);
};

// 成员管理
const handleMembers = (club: any) => {
  currentClub.value = club;
  membersVisible.value = true;
};

// 查看成员
const viewMembers = (club: any) => {
  handleMembers(club);
};

// 更多操作
const handleMoreAction = async (command: string, club: any) => {
  switch (command) {
    case "verify":
      currentClub.value = club;
      verifyForm.result = "pass";
      verifyForm.remark = "";
      verifyVisible.value = true;
      break;
    case "dissolve":
      try {
        await ElMessageBox.confirm(
          `确定要解散俱乐部 "${club.name}" 吗？此操作不可恢复！`,
          "确认解散",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        );

        club.status = "dissolved";
        ElMessage.success("俱乐部已解散");
      } catch {
        // 用户取消
      }
      break;
    case "delete":
      try {
        await ElMessageBox.confirm(
          `确定要删除俱乐部 "${club.name}" 吗？此操作不可恢复！`,
          "确认删除",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        );

        ElMessage.success("删除成功");
        loadClubList();
      } catch {
        // 用户取消
      }
      break;
  }
};

// 提交认证审核
const handleSubmitVerify = () => {
  if (!verifyForm.remark.trim()) {
    ElMessage.warning("请输入审核意见");
    return;
  }

  if (currentClub.value) {
    currentClub.value.verifyStatus =
      verifyForm.result === "pass" ? "verified" : "failed";
  }

  ElMessage.success("审核提交成功");
  verifyVisible.value = false;
};

// 添加成员
const handleAddMember = () => {
  ElMessage.info("添加成员功能开发中");
};

// 批量移除成员
const handleBatchRemove = () => {
  ElMessage.info("批量移除功能开发中");
};

// 变更角色
const handleChangeRole = (member: any) => {
  ElMessage.info("变更角色功能开发中");
};

// 移除成员
const handleRemoveMember = async (member: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要移除成员 "${member.realName}" 吗？`,
      "确认移除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    ElMessage.success("移除成功");
  } catch {
    // 用户取消
  }
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size;
  loadClubList();
};

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.page = page;
  loadClubList();
};

// 加载俱乐部列表
const loadClubList = async () => {
  loading.value = true;
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500));
    pagination.total = 50;
  } catch (error) {
    ElMessage.error("加载俱乐部列表失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadClubList();
});
</script>

<style scoped lang="scss">
.club-list-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card,
.action-card,
.table-card {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.search-form {
  .el-form-item {
    margin-bottom: 16px;
  }
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .action-left {
    display: flex;
    gap: 8px;
  }
}

.club-name {
  display: flex;
  align-items: center;
  gap: 8px;

  .name {
    font-weight: 500;
  }

  .verify-tag {
    font-size: 12px;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.club-detail {
  .el-descriptions {
    margin-bottom: 20px;
  }
}

.members-management {
  .members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
    font-weight: 600;
    color: #303133;

    .header-actions {
      display: flex;
      gap: 8px;
    }
  }
}

.verify-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .club-list-container {
    padding: 10px;
  }

  .search-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 12px;

      .el-input,
      .el-select,
      .el-date-picker {
        width: 100% !important;
      }
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left {
      flex-wrap: wrap;
    }

    .action-right {
      align-self: flex-end;
    }
  }

  .members-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;

    .header-actions {
      width: 100%;
      justify-content: flex-start;
    }
  }
}
</style>
